<template>
  <el-dialog :title="form.id?'编辑房产':'添加房产'" :visible="showDialog" @close="delFn">
    <!-- 表单 -->
    <el-form ref="form" label-width="120px" :rules="rules" :model="form">

      <el-form-item label="经纪" prop="agent">
        <el-select v-model="form.agent" style="width:50%" placeholder="请选择">
          <el-option v-for="item in agentList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="分类" prop="category">
        <el-select v-model="form.category" style="width:50%" placeholder="请选择">
          <el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="标签">
        <el-tag
          v-for="tag in dynamicTags"
          :key="tag"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          v-if="inputVisible"
          ref="saveTagInput"
          v-model="inputValue"
          class="input-new-tag"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        />
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <!-- //中国省市区级联数据 -->
        <el-cascader
          v-model="selectedOptions"
          size="large"
          :options="options"
          @change="handleChange"
        />
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="form.price" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item label="图片介绍">

        <UploadImage ref="UploadImage1" :number="2" /></el-form-item>
      <el-form-item label="封面">
        <UploadImage ref="UploadImage2" />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="delFn">取消</el-button>
          <el-button type="primary" size="small" @click="confirmFn">确定</el-button>
        </el-col>
      </el-row>
    </template>

  </el-dialog>
</template>
<script>
import { newProperties, comProperties, getPropertiesById } from '@/api/property'
import { regionData, CodeToText } from 'element-china-area-data'
import { getAgentsList } from '@/api/agents'
import { getCategoriesList } from '@/api/categories'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false

    }
  },
  data() {
    return {

      ruleForm: '',
      economy: '',
      classify: '',
      title: '',
      price: '',
      dynamicTags: [],
      inputVisible: false,
      // 标签输入框里的内容
      inputValue: '',
      form: {
        desc: '',
        title: '',
        price: '',
        category: '',
        agent: '',
        image: '',
        address: '',
        photos: [],
        tags: []
      },
      rules: {
        desc: [
          { required: true, message: '描述不能为空', trigger: 'blur' },
          { min: 5, max: 200, message: '描述不能低于5个字符', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
          { min: 3, max: 10, message: '标题不能低于3个字符不能超过10个字符', trigger: 'blur' }
        ],

        price: [
          { required: true, message: '价格不能为空', trigger: 'blur' }
        ],
        address: [{ required: true, message: '地址不能为空', trigger: 'blur' }]

      },
      options: regionData,
      selectedOptions: [],
      // 经纪列表
      agentList: [],
      // 分类列表
      categoryList: []
    }
  },
  async created() {
    // 获取经纪列表
    this.agentList = await getAgentsList()
    // console.log(135, this.agentList)
    // 获取分类列表
    this.categoryList = await getCategoriesList()
    // console.log(139, this.categoryList)
  },
  methods: {

    // 中国省市区级联数据
    handleChange(value) {
      // console.log(129, value)
      const res = value.map(item => {
        return CodeToText[item]
      })
      this.form.address = res.toString()
    },
    delFn() {
      this.$emit('update:showDialog', false)

      // 清空标签
      this.dynamicTags = []
      // 清空表单
      this.form = {
        desc: '',
        title: '',
        price: '',
        category: '',
        agent: '',
        image: '',
        address: '',
        photos: [],
        tags: []
      }
      // 清空表单验证规则
      this.$refs.form.resetFields()
      this.$refs.UploadImage1.fileList = []
      this.$refs.UploadImage2.fileList = []
    },
    // 提交
    async confirmFn() {
      if (this.form.id) {
        // console.log(1111)
        this.form.photos = []
        this.form.image = this.$refs.UploadImage2.fileList[0].url
        this.$refs.UploadImage1.fileList.forEach(element => {
          this.form.photos.push(element.url)
        })
        await comProperties(this.form)
        this.$message.success('编辑成功')
        // 更新列表 -- 子传父
        this.$emit('updateList')
      } else {
        this.form.image = this.$refs.UploadImage2.fileList[0].url
        this.$refs.UploadImage1.fileList.forEach(element => {
          this.form.photos.push(element.url)
        })
        await newProperties(this.form)
        this.$message.success('添加成功')
      }

      this.delFn()
      this.$emit('update')
    },
    // 关闭标签的时候删除数组里的标签
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      this.form.tags = this.dynamicTags
      console.log(171, this.form.tags)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
        this.form.tags = this.dynamicTags
      }
      this.inputVisible = false
      this.inputValue = ''
      // console.log(this.form.tags)
    },
    // 获取指定房产
    async getPropertiesById(id) {
      this.form = await getPropertiesById(id)
      this.form.agent = this.form.agent && this.form.agent.id || ''
      this.form.category = this.form.category && this.form.category.id || ''
      this.$refs.UploadImage2.fileList.push({ url: this.form.image })
      this.$refs.UploadImage1.fileList = this.form.photos.map(item => {
        return { url: item }
      })
    }
  }
}

</script>

